<template>
  <page-header-wrapper :title="false">
      <a-card>
        <a-row>
          <a-col :span="2">
            <a-avatar shape="square" :size="64" icon="link" theme="twoTone" />
          </a-col>
          <a-col :span="14">
            <h4>什么是角色</h4>
            <div>
              <p>在这里写提示内容~~~</p>
              <p>在这里写提示内容~~~</p>
            </div>
          </a-col>
          <a-col :span="8" align="right">
            <a-button type="primary" @click="golist">开始使用</a-button>
          </a-col>
        </a-row>
        <div style="margin:3em 0; width:80%">
          <template>
            <a-steps :current="current" @change="onChange">
              <a-step title="第一步" description="1.~~~" />
              <a-step title="第二步" description="2.~~~" />
              <a-step title="第三步" description="3.~~~" />
              <a-step title="第四步" description="4.~~~" />
              <a-step title="第五步" description="5.~~~" />
            </a-steps>
          </template>
        </div>
      </a-card>
      <a-card style="margin-top:1em">
        <h5 id="step-0">1. ~~~</h5>
        <img src="" width="100%"/>

        <div class="emptyrow"></div>
        <h5 id="step-1">2. ~~~</h5>
        <img src="" width="100%"/>

        <div class="emptyrow"></div>
        <h5 id="step-2">3. ~~~</h5>
        <a-row>
          <a-col :span="8">
            <h5>a. ~~~</h5>
            <img src="" width="100%"/>
          </a-col>
          <a-col :span="8">
            <h5>b. ~~~</h5>
            <img src="" width="100%"/>
          </a-col>
          <a-col :span="8">
            <h5>c. ~~~</h5>
            <img src="" width="100%"/>
          </a-col>
        </a-row>
      </a-card>
  </page-header-wrapper>
</template>

<style lang="less">
  h4{
    font-size: 1.5em;
  }

  h5{
    font-size: 1.2em;
    line-height: 2em;
    text-shadow: 4px 4px 4px #b0e2ff;
  }

  .emptyrow{
    margin-top:3em;
  }
</style>
<script>
export default {
  data(){
    return {
    	current: 0,
    }
  },
  created () {
  },
  methods: {
    golist(){
      this.$router.push({ name: 'ha_roleList', params: { queryParam: this.$route.params.queryParam } })
    },
    /**
     * 步骤条跳转
     * 
     */
    onChange(current) {
      console.log('onChange:', current)
      this.current = current
      this.goAnchorPoint('step-' + current)
    },
    /**
     * 跳转锚链接
     * @param id
     */
    goAnchorPoint(elemId) {
      let anchorH = document.getElementById(elemId).offsetTop

      if (document.documentElement.scrollTop) {
        document.documentElement.scrollTop = anchorH
      } else if (document.body.scrollTop) {
        document.body.scrollTop = anchorH
      } else {
        //二者均为0状态，有一者恒为0，另一者可能因为回到顶部等操作被置为0，便会出现这种状况
        document.documentElement.scrollTop = anchorH
        document.body.scrollTop = anchorH
      }

      //window.scrollTo(0,anchorH)  //若以上scrollTop方式不生效，可使用此scrollTo方式，但注意scrollTo在安卓手机上存在兼容性问题
    },
  }
}
</script>
